<template>
  <div>
    <img :src="options.img" @click="goAction" />
    <van-popup v-model="show" class="van-popup-class" position="bottom">
      <div class="qa-body">
        <div class="qa-layout" style="">
          <div class="chat-list">
            <ul>
              <!-- <li class="left">
                        <div class="message">
                          <div class="message-info">
                            <font>{{ options.teacherName }}</font>
                          </div>
                          <div class="message-content">
                            <span>{{ this.options.content }}</span>
                          </div>
                        </div>
                      </li>
                      <li class="right" style="flex-direction: row-reverse;">
                        <img :src="userImage">
                        <div class="message">
                          <div class="message-content">
                            <span>{{ this.btnText }}</span>
                          </div>
                        </div>
                      </li> -->
              <li
                v-for="(item, index) in chatList"
                :key="index"
                :class="item.position"
                :style="item.style"
              >
                <img :src="item.image" />
                <div class="message">
                  <div class="message-info" v-if="item.showName">
                    <font>{{ options.teacherName }}</font>
                  </div>
                  <div class="message-content">
                    <span>{{ item.message }}</span>
                    <div class="qa-options" v-if="index == chatList.length - 1">
                      <button
                        v-for="(v, i) in item.options"
                        :key="i"
                        @click="clickOption(v)"
                      >
                        {{ v }}
                      </button>
                    </div>
                  </div>
                </div>
              </li>
            </ul>
          </div>
          <div class="btn-p">
            <div class="btn" @click="handleClick" v-if="showBtn">
              点击获取门店地址
            </div>
          </div>
        </div>
      </div>
    </van-popup>
  </div>
</template>
<script>
import tpl from "@/mixins/tpl";
import { Dialog } from "vant";
import { mapState } from "vuex";

export default {
  mixins: [tpl],
  props: {
    view: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return {
      chatList: [],
      step: 0,
      show: false,
      showBtn: false,
      com_desc: [],
    };
  },
  computed: {
    ...mapState("open", ["customer", "mobile_firest_template"]),
    options() {
      return this.view.options;
    },
    comObj() {
      let { type, name } = this.view;
      return {
        type,
        name,
      };
    },
  },
  created() {
    if (this.options.is_go) {
      setTimeout(() => {
        this.show = true;
      }, this.options.duration * 1000);
    }

    this.init();
  },
  methods: {
    goAction() {
      if (!this.options.is_go) {
        this.show = true;
      }
    },
    init() {
      setTimeout(() => {
        this.teacherAnswer();
      }, 600);
    },
    teacherAnswer() {
      console.log(this.options, "sss");
      this.chatList.push({
        position: "left",
        image:
          "https://saas-tools-1305286542.cos.ap-shanghai.myqcloud.com/kefutusiejge.jpeg",
        message: this.options.formList[this.step]?.question,
        options: this.options.formList[this.step].options,
        style: {},
        showName: true,
      });
      //记录这是第几个问题
      let obj = this.chatList[this.chatList.length - 1] ?? {};
      this.com_desc.push({
        title: obj.message,
        value: "",
      });
    },
    clickOption(value) {
      this.step += 1;

      //记录当前点击的是第几个问题
      this.com_desc[this.com_desc.length - 1].value = value;
      console.log(this.com_desc, "记录当前点击的是第几个问题");

      this.chatList.push({
        position: "right",
        image:
          "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg3.doubanio.com%2Fview%2Fgroup_topic%2Fl%2Fpublic%2Fp403769333.jpg&refer=http%3A%2F%2Fimg3.doubanio.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1720166689&t=286687c19a412ea46d5cd5bbe62df688",
        message: value,
        options: [],
        style: {
          flexDirection: "row-reverse",
        },
        showName: false,
      });
      setTimeout(() => {
        this.teacherAnswer();
      }, 600);
      if (this.step == this.options.formList.length) {
        this.handleClick();
        // this.showBtn = true;
        return;
      }
    },
    async handleClick(ev) {
      const { click_type } = this.options;
      const { is_qq_ca, } = this.customer;
      console.log("customer", this.customer);
      const { mp_type } = this.mobile_firest_template;

      // let obj = {
      //   com_id: this.comObj.type,
      //   com_title: this.comObj.name,
      //   com_desc: this.com_desc.map((it) => it.title + it.value).join(";"),
      // };
      // 记录当前组件的使用次数
      // this.addFormComFn(obj);

      if (is_qq_ca) {
        // this.getCode(getData.image_url);
        console.log(this.customer, "auto_skip_mp_111");
        Dialog.confirm({
          title: "提示",
          message: "即将为你分配专属客服解答你的咨询",
        })
          .then(() => {
            setTimeout(() => {
              // window.location.href = image_url;
              console.log(322);
              this.skipAdMp(this.options);
            }, 100);
          })
          .catch(() => {
            // on cancel
          });
        return;
      }

      this.skipAdMp(this.options);

      if (click_type == 2 && !mp_type) {
        this.skipAdMp(this.options);
        return;
      }
      if (click_type == 2 && mp_type) {
        this.skipAdMpTiktok(this.options);
        return;
      }

      this.$emit("click", ev);
    },
  },
};
</script>
<style lang="scss" scoped>
.van-popup-class {
  width: 100%;
  height: 100%;
}
.chat-list {
  width: 100%;
  display: flex;
  flex-direction: column;
  padding: 15px;
  box-sizing: border-box;
  height: auto;
}
.chat-list ul {
  width: 100%;
  display: flex;
  flex-direction: column;
  padding: 0;
  margin: 0;
}

.chat-list ul li {
  list-style: none;
  display: flex;
  flex-direction: row;
  margin-bottom: 15px;
  font-size: 14px;
  animation: myfirst 0.8s;
}
.chat-list ul li > img {
  width: 44px;
  height: 44px;
  border-radius: 3px;
}
.chat-list ul li .message {
  flex: 1;
  display: flex;
  flex-direction: column;
  line-height: 20px;
}
.chat-list ul li .message > .message-info {
  display: flex;
  line-height: 20px;
  margin: 0 10px 5px;
  color: #999;
}
.chat-list ul li .message > .message-info > font:first-child {
  margin-right: 15px;
  font-weight: 600;
  font-size: 15px;
  color: #333;
}
.chat-list ul li .message .message-content {
  float: left;
  font-size: 15px;
  margin: 0 10px;
  line-height: 24px;
  padding: 10px;
  border-radius: 4px;
  position: relative;
  word-break: break-all;
  background: #fff;
  width: fit-content;
}
.chat-list ul li .message .message-content .qa-options {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: space-around;
}
.chat-list ul li .message .message-content .qa-options button {
  width: 40%;
  padding: 5px 10px;
  border: none;
  color: #fff;
  background-color: #ff9b23;
  border-radius: 10px;
  margin-top: 10px;
}
.chat-list ul .left .message span:before {
  position: absolute;
  top: 22px;
  transform: translate(-5px, -50%);
  left: 0;
  content: "";
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-right: 8px solid #ffffff;
  width: 0;
  height: 0;
}

.chat-list ul li .right {
  flex-direction: row-reverse;
}
.chat-list ul .right .message {
  flex: 1;
  display: flex;
  flex-direction: row-reverse;
}
.chat-list ul .right .message .message-content {
  background-color: #07c160;
  color: #fff;
}
.chat-list ul .right .message .message-content span:after {
  position: absolute;
  top: 22px;
  transform: translate(5px, -50%);
  right: 0;
  content: "";
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-left: 8px solid #07c160;
  width: 0;
  height: 0;
}

@keyframes myfirst {
  from {
    transform: translateY(50px);
    opacity: 0;
  }
  to {
    transform: translateY(0px);
    opacity: 1;
  }
}
.btn {
  background: linear-gradient(90deg, #f4b56a 0%, #ff9b23 100%);
  color: #fff;
  padding: 10px;
  text-align: center;
  border-radius: 15px;
  animation: bubble 2s infinite both;
}
.btn-p {
  width: 100%;
  position: absolute;
  bottom: 0;
  padding: 30px;
}

/* 定义关键帧 */
@keyframes bubble {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.1);
    opacity: 0.8;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
</style>
